<script setup>

import menuService from "@/service/impl/MenuService.js"
import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {nextTick, onMounted,ref} from "vue";
import {log} from "@/util/Log.js";
import MenuModel from "@/model/MenuModel.js"
import AuthorityBtn from "@/components/AuthorityBtn.vue";

const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const menu = ref(new MenuModel())
const menuTree = ref([
    {
        id: 0,
        menuName: t('header.title'),
        path: '',
        orderNum: 0,
        children: []
    }
])
const selectedNode = ref(null)
const treeRef = ref(null)

const onCreate = () => {
    module.value.layout = {
        tableLeft: true,
        width: "250px",
        page: false,
        table: true,
    }
    module.value.init(menuService.url.edit, menuService.url.edit,
        null, null, null)
    module.value.operations.width = "200px"
    init()
}

const init = () => {
    // data.value.load = true
    menuService.find({}).then(res => {
        menuTree.value[0].children = res.data
        // data.value.load = false
        nextTick(() => treeRef.value?.setCheckedNodes([selectedNode.value], true))
    }).catch(e => {
        // log.info(e)
    })
}

const editOpen = (data, index, type) => {
    let fun = {
        0: () => {
            menu.value = new MenuModel()
            let items = selectedNode.value?.children;
            let orderNum = items?.length > 0 ? items[items.length-1].orderNum: selectedNode.value.orderNum
            menu.value.orderNum = orderNum + 1
            menu.value.path = selectedNode.value?.path+'/'
            menu.value.parent = selectedNode.value?.id
        },
        1: () => Object.assign(menu.value, data)
    }
    module.value.dialog.load = false
    fun[type]()
}

const editConfirm = (type) => {
    menuService.edit(menu.value).then(res => {
        let fun = {
            0: () => {
                if(!menu.value.id && menu.value.parent){
                    data.value.list.push(res.data)
                }
            },
            1: () => {
                let item = data.value.list.find(item => item.id === res.data.id)
                Object.assign(item, res.data)
            }
        }
        fun[type]()
        message.success(t('btn.success'))
        init()
    })
}

const del = (d, index) => {
    menuService.del(d).then(res => {
        init()
        data.value.list.splice(index,1)
        message.success(t('btn.success'))
    })
}

const handleCheck = (node, checked, indeterminate) => {
    if(!node){
        return
    }
    let obj = Object.assign({},node)
    if(obj.children.length>0){
        let nodes = obj.children.map(item => {
            let i = Object.assign({},item)
            // 增加是否能有删除按钮的标识
            item.children.length > 0? i.tag = true : i.tag = false
            delete i.children
            return i
        })
        data.value.list = nodes
    }else{
        delete obj.children
        data.value.list = [obj]
    }
    selectedNode.value = node
    treeRef.value?.setCheckedNodes([node], false)
}

</script>
<template>
    <Page
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @onShow="init"
        @onCreate="onCreate"
    >
        <template #table-left>
            <el-tree
                ref="treeRef"
                style="width: 100%"
                :data="menuTree"
                :props="{
                    children: 'children',
                    label: 'menuName',
                }"
                node-key="id"
                check-strictly
                show-checkbox
                :default-expand-all="true"
                @check="handleCheck"
            />
        </template>
        <template #table-column>
            <el-table-column prop="menuName" :label="$t('menu.name')"/>
            <el-table-column prop="path" :label="$t('menu.path')"/>
            <el-table-column prop="orderNum" :label="$t('menu.order')"/>
<!--            <el-table-column prop="enableTag" :label="$t('menu.enable')">-->
<!--                <template #default="scope">-->
<!--                    {{ scope.row.enableTag ? $t('btn.enable') : $t('btn.disable') }}-->
<!--                </template>-->
<!--            </el-table-column>-->
        </template>
        <template #after-table-event="row">
            <AuthorityBtn :path="menuService.url.del" >
                <el-popconfirm :title="$t('btn.delMsg')" @confirm="del(row.data,row.index)">
                    <template #reference>
                        <el-button v-if="!row.data.tag" type="danger">{{$t('btn.del')}}</el-button>
                    </template>
                </el-popconfirm>
            </AuthorityBtn>
        </template>
        <template #table-dialog>
            <el-form :rules="menu.rules" :model="menu" :label-width="100" :label-position="'left'" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('menu.name')" prop="menuName">
                    <el-input v-model="menu.menuName" autocomplete="off"/>
                </el-form-item>
                <el-form-item :label="$t('menu.path')" prop="path">
                    <el-input v-model="menu.path" autocomplete="off"/>
                </el-form-item>
                <el-form-item :label="$t('menu.order')" prop="orderNum">
                    <el-input v-model="menu.orderNum" autocomplete="off"/>
                </el-form-item>
<!--                <el-form-item :label="$t('menu.enable')" prop="enableTag">-->
<!--                    <el-switch-->
<!--                        v-model="menu.enableTag"-->
<!--                        size="small"-->
<!--                        active-text="启用"-->
<!--                        inactive-text="停用"-->
<!--                        :active-value="true"-->
<!--                        :inactive-value="false"-->
<!--                    />-->
<!--                </el-form-item>-->
            </el-form>
        </template>
    </Page>
</template>

<style lang="scss" scoped>

</style>
